<!--  -->
<template>
<div class='mytodos'>
  <!-- 标题开始 -->
  <div class="mytodos-top">
    <h1>todos</h1>
  </div>
  <!-- 标题结束 -->
  <!-- 内容开始 -->
  <div class="mytodos-content">
    <div class="mytodos-content-top">
      <div :class="['content-top-left',{allchecked:allChecked}]" @click.stop="allCheckClick">﹀</div>
      <div class="content-top-right">
        <input type="text" placeholder="What needs to be done?" @keyup.enter="addListClick" v-model="inputVal"
        v-focus>
      </div>
    </div>
    <div class="mytodos-content-middle">
        <div class="middle-list-item" v-for="(item,index) in filterTodos" :key="item.id">
          <!-- 勾选 -->
          <div class="item-chexk">
            <input type="checkbox" name="" id="" v-model="item.status">
          </div>
          <!-- 内容 -->
          <div :class="['item-text',{select:item.status}]" @dblclick="editTodo(index)">
            <span :class="[{hidden:edit_index === index}]">{{item.text}}</span>
            <input type="text" :class="[{hidden:edit_index !== index}]" v-model="item.text" @blur="saveTodo">
          </div>
          <!-- 删除列表项 -->
          <div class="item-close"  @click.stop="clearClick(index)">×</div>
        </div>
    </div>
    <div class="mytodos-content-botton">
      <div class="content-botton-left">
        余{{remaining}}项
      </div>
      <div class="content-botton-mid">
        <div @click.stop="stateClick('all')" :class="['botton-mid-left',{active:activeTab==='all'}]">全部</div>
        <div @click.stop="stateClick('active')" :class="['botton-mid-mid',{active:activeTab==='active'}]">激活</div>
        <div @click.stop="stateClick('complate')" :class="['botton-mid-right',{active:activeTab==='complate'}]">完成</div>
      </div>
      <div class="content-botton-right" @click.stop="clearComplate">
        清除已完成
      </div>
    </div>
  </div>
  <!-- 内容结束 -->
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  activeTab:"active",// all active complate
  edit_index:-1,//-1表示没有编辑 0表示正在编辑这一行
  inputVal:"",
  todos:JSON.parse(localStorage.getItem("todos")||'[]')
  //[
  //   {
  //     text:"玩游戏",
  //     status:true,
  //     id:1
  //   },
  //   {
  //     text:"拿高薪",
  //     status:false,
  //     id:2
  //   }
  // ]
};
},
//监听属性 类似于data概念
computed: {
  filterTodos:function(){
    if(this.activeTab === "all"){
      return this.todos
    }else if(this.activeTab === "active"){
      return this.todos.filter(v=>{
        return !v.status
      })
    }else if(this.activeTab === "complate"){
      return this.todos.filter(v=>{
        return v.status
      })
    }
  },
  //剩下的项目个数
  remaining:function(){
    let remainingTodos = this.todos.filter(v=>{
      return !v.status
     
    })
     return remainingTodos.length
  },
    allChecked:function(){
      let checked = true;
      this.todos.map((v)=>{
        if(!v.status) checked = false;
      });
      return checked;
    }
},
//监控data中的数据变化
watch: {
  todos:{
    handler:function(newTodos){
      localStorage.setItem("todos",JSON.stringify(newTodos));
    }
  },
  deep:true
},
//方法集合
methods: {
  //清除这一项
  clearClick:function(index){
    this.todos.splice(index,1)
  },
  //添加项目
  addListClick:function(){
    if(!this.inputVal){
     this.$message({
        message:"输入不能为空",
        type:"warning"
     })
     return false
    }
    this.todos.push({
      text:this.inputVal,
      status:false,
      id:Date.now(),
    })
    this.inputVal=""
  },
  //全选
  allCheckClick:function(){
    // this.allChecked=true;
    let newTodos = JSON.parse(JSON.stringify(this.todos));
    newTodos.map((v)=>{
      v.status= true;
    })
    this.todos=newTodos;
  },
  //双击编辑该项列表
  editTodo:function(index){
    this.edit_index = index; 
  },
  //编辑项目失去焦点保存修改后项目
  saveTodo:function(){
    this.edit_index = -1;
  },
  //底部功能栏筛选
  stateClick:function(activeTab){
    this.activeTab = activeTab
  },
  //清楚已完成
  clearComplate:function(){
    let activeTodos = this.todos.filter(v=>{
      return !v.status
    })
    this.todos = activeTodos
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
directives:{
  "focus":{
    inserted:function(el){
      el.focus()
    }
  }
}
}
</script>
<style lang='less' scoped>
.hidden{
  display: none;
}
.mytodos {
  width: 650px;
  margin: 0 auto;
  font-size: 24px;
  border: 2px solid #ccc;
  .mytodos-top {
    h1 {
      font-size:30px;
    }
  }
  .mytodos-content {
    
    .mytodos-content-top {
      display: flex;
      height: 65px;
      line-height: 65px;
      box-sizing: border-box;
      border-bottom: 2px solid #ccc;
      .content-top-left {
        flex: 1;
        padding-top: 10px;
      }
      .allchecked{
        color: red;
      }
      .content-top-right {
        flex: 9;
       
        input {
          font-size: 24px;
          height: 50px;
          width: 100%;
          border: 0;
          outline: none;
        }
      }
    }
    .mytodos-content-middle {
      
      .middle-list-item {
        height: 65px;
        line-height: 65px;
        display: flex;
        border-bottom: 2px solid #ccc;
        box-sizing: border-box;
        .item-chexk {
          flex: 1;
          input {
            width: 20px;
            height: 20px;
          }
        }

        .item-text {
          flex: 8;
          text-align: left;
          input{
            outline: none;
            font-size: 24px;
            border: 0;
          }
        }
        .select{
          color: #ccc;
          text-decoration: line-through;
        }
        .item-close {
          visibility: hidden;
          flex: 1;
        }
      }
       .middle-list-item:hover{
          .item-close {
          visibility: visible;
          cursor: pointer;
          flex: 1;
        }
       }
    }
    .mytodos-content-botton {
      height: 65px;
      display: flex;
      font-size: 18px;
      text-align: center;
      line-height: 65px;
      .content-botton-left {
        flex: 2;
        text-align: left;
        padding-left: 15px;
      }

      .content-botton-mid {
        display: flex;
        flex: 6;
        justify-content: center;
        .botton-mid-mid {
          padding: 0 20px;
        }
        .botton-mid-left {
          padding: 0 20px;
        }
        .botton-mid-right {
          padding: 0 20px;
        }
        .active{
          border:1px solid #ccc;
          padding: 0 20px;
          border-radius: 5px;
        }
      }

      .content-botton-right {
        flex: 2;
      }
    }
  }
}
</style>